import Taro, { useEffect, useState } from '@tarojs/taro'
import { View, Input, Image, Button } from '@tarojs/components'
import './index.scss'

// globalData
import { REALNAME } from '../../globalData'

export default function Realname() {
  const [realname, setRealname] = useState('')

  useEffect(() => {
    const realNameStorage = Taro.getStorageSync(REALNAME)
    setRealname(realNameStorage)
  }, [])


  function handleSubmit() {
    Taro.setStorageSync(REALNAME, realname)
    Taro.showToast({
      title: '设置成功!',
    }).then(() => {
      Taro.navigateBack()
    })
  }

  return (
    <View className='realname-page'>
      <View className='form-container'>
        <Image src={require('../../assets/realname48X48@2x.png')} className='img' />
        <Input
          type='text' placeholder='请输入微信零钱真实姓名'
          value={realname}
          // onChange={(e) => { setRealname(e.detail.value) }}
          onInput={(e) => { setRealname(e.detail.value) }}
        />
      </View>
      <Button className='btn' onClick={() => handleSubmit()}>确 定</Button>
    </View>
  )
}

Realname.config = {
  navigationBarTitleText: '身份证姓名',
}
